<template>
<div>

     <table class="tBox">
      <thead>
        <tr>
          <th>商品选中状态</th>
          <th>商品序号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>数量修改</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in goodsList"
          :key="index"
          :class="item.flag ? 'active' : ''"
        >
          <td>
            <input type="checkbox" name="" id="" v-model="item.flag" />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td v-show="item.count > 0">{{ item.count }}</td>
          <td>
            <button @click="singleaddCount(item)">++</button>

            <button>--</button>
          </td>
          <td>
            <button @click="mydelete(item)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr v-if="totalCount !== 0">
          <td colspan="2">总数量：{{ selectCount }} / {{ totalCount }}</td>
          <td colspan="2">总价: {{ totalPrice | moneyChange("人民币") }}</td>
        </tr>
      </tfoot>
    </table>
</div>
</template>

<script>
export default {
    props:['goodsList'],
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        mydelete(item) {
            this.$emit('deleteGood',item)
        },

         //单个商品数量添加
         singleaddCount(currentItem)  {
             this.$emit('add-goods-count',currentItem)

         }

    },
      computed: {
    totalPrice() {
      let totalP = this.goodsList.reduce((pre, current, index) => {
        if (current.flag) {
          return pre + current.price;
        } else {
          return pre;
        }
      }, 0);

      return totalP;
    },
    selectCount() {
      let count = 0;
      this.goodsList.forEach((item) => {
        if (item.flag) {
          count++;
        }
      });
      return count;
    },
    totalCount() {
      return this.goodsList.length;
    },
  },
  filters: {
    moneyChange: function (val, xxx) {
      return val + xxx;
    },
  },
};
</script>

<style scoped   lang='css'>
.active {
  background-color: pink;
}
</style>
